<template>
  <div class="time-management-game">
    <div class="game-header">
      <div class="header-content">
        <el-button icon="ArrowLeft" @click="goBack">返回游戏中心</el-button>
        <div class="game-title">
          <h1>⏰ 时间管理大师</h1>
          <p>合理安排一天的工作，在有限时间内完成最多价值的任务</p>
        </div>
        <div class="game-stats">
          <el-tag type="success" size="large">时间: {{ currentTime }}</el-tag>
          <el-tag type="warning" size="large">能量: {{ energy }}%</el-tag>
          <el-tag type="danger" size="large">得分: {{ score }}</el-tag>
        </div>
      </div>
    </div>

    <div class="game-container">
      <!-- 开始界面 -->
      <div v-if="gameStatus === 'ready'" class="game-start">
        <div class="start-card">
          <el-icon class="start-icon"><Clock /></el-icon>
          <h2>时间管理大师</h2>
          <p>作为一名项目经理，你需要在一天内（8:00-18:00）合理安排各项工作</p>
          <div class="game-rules">
            <h3>游戏规则</h3>
            <ul>
              <li>⏰ 一天有10小时工作时间（8:00-18:00）</li>
              <li>💪 你有100点能量，每项任务消耗不同能量</li>
              <li>📊 任务有紧急度和重要性，根据四象限法则决策</li>
              <li>⚡ 能量可通过休息恢复，但会消耗时间</li>
              <li>🎯 合理规划任务顺序，获得最高价值</li>
              <li>📞 随机会有紧急任务或干扰事件</li>
            </ul>
            <div class="time-matrix">
              <h4>时间管理四象限</h4>
              <div class="matrix-grid">
                <div class="matrix-cell urgent-important">
                  <strong>重要且紧急</strong>
                  <span>立即处理</span>
                </div>
                <div class="matrix-cell not-urgent-important">
                  <strong>重要不紧急</strong>
                  <span>计划执行</span>
                </div>
                <div class="matrix-cell urgent-not-important">
                  <strong>紧急不重要</strong>
                  <span>授权委托</span>
                </div>
                <div class="matrix-cell not-urgent-not-important">
                  <strong>不重要不紧急</strong>
                  <span>减少或取消</span>
                </div>
              </div>
            </div>
          </div>
          <el-button type="primary" size="large" @click="startGame">
            <el-icon><CaretRight /></el-icon>
            开始新的一天
          </el-button>
        </div>
      </div>

      <!-- 游戏进行中 -->
      <div v-if="gameStatus === 'playing'" class="game-playing">
        <el-row :gutter="20">
          <!-- 左侧：任务列表 -->
          <el-col :span="14">
            <el-card class="task-board">
              <template #header>
                <div class="board-header">
                  <h3>📋 今日任务清单</h3>
                  <el-button @click="showMatrix = !showMatrix" size="small">
                    {{ showMatrix ? '列表视图' : '四象限视图' }}
                  </el-button>
                </div>
              </template>

              <!-- 四象限视图 -->
              <div v-if="showMatrix" class="task-matrix">
                <div class="matrix-quadrant urgent-important">
                  <h4>🔴 重要且紧急</h4>
                  <div 
                    v-for="task in getTasksByQuadrant('urgent-important')" 
                    :key="task.id"
                    class="task-item"
                    :class="{ completed: task.completed, selected: selectedTask?.id === task.id }"
                    @click="selectTask(task)"
                  >
                    <div class="task-header">
                      <span class="task-name">{{ task.name }}</span>
                      <el-tag v-if="task.completed" type="success" size="small">✓</el-tag>
                    </div>
                    <div class="task-meta">
                      <span>⏱️ {{ task.duration }}小时</span>
                      <span>💪 {{ task.energyCost }}能量</span>
                      <span>⭐ {{ task.value }}分</span>
                    </div>
                  </div>
                </div>
                <div class="matrix-quadrant not-urgent-important">
                  <h4>🟡 重要不紧急</h4>
                  <div 
                    v-for="task in getTasksByQuadrant('not-urgent-important')" 
                    :key="task.id"
                    class="task-item"
                    :class="{ completed: task.completed, selected: selectedTask?.id === task.id }"
                    @click="selectTask(task)"
                  >
                    <div class="task-header">
                      <span class="task-name">{{ task.name }}</span>
                      <el-tag v-if="task.completed" type="success" size="small">✓</el-tag>
                    </div>
                    <div class="task-meta">
                      <span>⏱️ {{ task.duration }}小时</span>
                      <span>💪 {{ task.energyCost }}能量</span>
                      <span>⭐ {{ task.value }}分</span>
                    </div>
                  </div>
                </div>
                <div class="matrix-quadrant urgent-not-important">
                  <h4>🟠 紧急不重要</h4>
                  <div 
                    v-for="task in getTasksByQuadrant('urgent-not-important')" 
                    :key="task.id"
                    class="task-item"
                    :class="{ completed: task.completed, selected: selectedTask?.id === task.id }"
                    @click="selectTask(task)"
                  >
                    <div class="task-header">
                      <span class="task-name">{{ task.name }}</span>
                      <el-tag v-if="task.completed" type="success" size="small">✓</el-tag>
                    </div>
                    <div class="task-meta">
                      <span>⏱️ {{ task.duration }}小时</span>
                      <span>💪 {{ task.energyCost }}能量</span>
                      <span>⭐ {{ task.value }}分</span>
                    </div>
                  </div>
                </div>
                <div class="matrix-quadrant not-urgent-not-important">
                  <h4>⚪ 不重要不紧急</h4>
                  <div 
                    v-for="task in getTasksByQuadrant('not-urgent-not-important')" 
                    :key="task.id"
                    class="task-item"
                    :class="{ completed: task.completed, selected: selectedTask?.id === task.id }"
                    @click="selectTask(task)"
                  >
                    <div class="task-header">
                      <span class="task-name">{{ task.name }}</span>
                      <el-tag v-if="task.completed" type="success" size="small">✓</el-tag>
                    </div>
                    <div class="task-meta">
                      <span>⏱️ {{ task.duration }}小时</span>
                      <span>💪 {{ task.energyCost }}能量</span>
                      <span>⭐ {{ task.value }}分</span>
                    </div>
                  </div>
                </div>
              </div>

              <!-- 列表视图 -->
              <div v-else class="task-list">
                <div 
                  v-for="task in tasks" 
                  :key="task.id"
                  class="task-card"
                  :class="{ completed: task.completed, selected: selectedTask?.id === task.id }"
                  @click="selectTask(task)"
                >
                  <div class="task-info">
                    <h4>{{ task.name }}</h4>
                    <p>{{ task.description }}</p>
                    <div class="task-tags">
                      <el-tag :type="task.urgent ? 'danger' : 'info'" size="small">
                        {{ task.urgent ? '紧急' : '不紧急' }}
                      </el-tag>
                      <el-tag :type="task.important ? 'warning' : 'info'" size="small">
                        {{ task.important ? '重要' : '不重要' }}
                      </el-tag>
                    </div>
                  </div>
                  <div class="task-stats">
                    <div class="stat">⏱️ {{ task.duration }}小时</div>
                    <div class="stat">💪 {{ task.energyCost }}能量</div>
                    <div class="stat">⭐ {{ task.value }}分</div>
                  </div>
                  <el-icon v-if="task.completed" class="check-icon"><CircleCheck /></el-icon>
                </div>
              </div>
            </el-card>

            <!-- 事件提示 -->
            <el-card v-if="currentEvent" class="event-card">
              <template #header>
                <h3>{{ currentEvent.icon }} {{ currentEvent.title }}</h3>
              </template>
              <p>{{ currentEvent.description }}</p>
              <div class="event-options">
                <el-button 
                  v-for="(option, index) in currentEvent.options" 
                  :key="index"
                  :type="option.type"
                  @click="handleEventOption(option)"
                >
                  {{ option.text }}
                </el-button>
              </div>
            </el-card>
          </el-col>

          <!-- 右侧：操作面板 -->
          <el-col :span="10">
            <el-card class="action-panel">
              <template #header>
                <h3>🎮 操作面板</h3>
              </template>

              <div class="time-display">
                <el-icon class="time-icon"><Clock /></el-icon>
                <div class="time-info">
                  <div class="current-time">{{ currentTime }}</div>
                  <el-progress :percentage="timeProgress" :show-text="false" />
                </div>
              </div>

              <div class="energy-display">
                <el-icon class="energy-icon"><Lightning /></el-icon>
                <div class="energy-info">
                  <div class="energy-text">能量：{{ energy }}%</div>
                  <el-progress :percentage="energy" :color="energyColor" />
                </div>
              </div>

              <el-divider />

              <div v-if="selectedTask" class="selected-task">
                <h4>📌 选中任务</h4>
                <div class="task-detail">
                  <h3>{{ selectedTask.name }}</h3>
                  <p>{{ selectedTask.description }}</p>
                  <div class="task-requirements">
                    <div class="requirement">
                      <el-icon><Clock /></el-icon>
                      需要 {{ selectedTask.duration }} 小时
                    </div>
                    <div class="requirement">
                      <el-icon><Lightning /></el-icon>
                      消耗 {{ selectedTask.energyCost }} 能量
                    </div>
                    <div class="requirement">
                      <el-icon><Star /></el-icon>
                      获得 {{ selectedTask.value }} 分
                    </div>
                  </div>
                  <el-button 
                    type="primary" 
                    size="large" 
                    block
                    :disabled="selectedTask.completed || energy < selectedTask.energyCost"
                    @click="doTask"
                  >
                    {{ selectedTask.completed ? '已完成' : '执行任务' }}
                  </el-button>
                </div>
              </div>
              <div v-else class="no-selection">
                <el-empty description="请选择一个任务" />
              </div>

              <el-divider />

              <div class="quick-actions">
                <h4>⚡ 快速操作</h4>
                <el-button 
                  icon="Coffee" 
                  :disabled="energy >= 80"
                  @click="takeBreak(30)"
                >
                  休息30分钟 (+30能量)
                </el-button>
                <el-button 
                  icon="Orange"
                  :disabled="energy >= 90"
                  @click="takeBreak(15)"
                >
                  喝咖啡 (+20能量，15分钟)
                </el-button>
                <el-button 
                  type="danger"
                  @click="endDay"
                >
                  结束这一天
                </el-button>
              </div>
            </el-card>

            <el-card class="statistics-panel">
              <template #header>
                <h3>📊 今日统计</h3>
              </template>
              <div class="stat-item">
                <span>已完成任务</span>
                <strong>{{ completedTaskCount }} / {{ tasks.length }}</strong>
              </div>
              <div class="stat-item">
                <span>已用时间</span>
                <strong>{{ usedHours }}小时</strong>
              </div>
              <div class="stat-item">
                <span>当前得分</span>
                <strong>{{ score }}分</strong>
              </div>
              <div class="stat-item">
                <span>效率评级</span>
                <el-rate v-model="efficiencyRating" disabled show-score />
              </div>
            </el-card>
          </el-col>
        </el-row>
      </div>

      <!-- 游戏结束 -->
      <div v-if="gameStatus === 'finished'" class="game-finish">
        <div class="finish-card">
          <el-icon class="finish-icon" :class="finalGrade"><Trophy /></el-icon>
          <h2>一天结束了！</h2>
          <div class="final-grade" :class="finalGrade">{{ finalGrade }} 级时间管理者</div>
          <p class="grade-text">{{ gradeText }}</p>

          <div class="final-stats">
            <div class="stat-block">
              <div class="stat-label">完成任务</div>
              <div class="stat-value">{{ completedTaskCount }}/{{ tasks.length }}</div>
            </div>
            <div class="stat-block">
              <div class="stat-label">总得分</div>
              <div class="stat-value">{{ score }}</div>
            </div>
            <div class="stat-block">
              <div class="stat-label">时间利用率</div>
              <div class="stat-value">{{ timeUtilization }}%</div>
            </div>
            <div class="stat-block">
              <div class="stat-label">高价值任务</div>
              <div class="stat-value">{{ highValueTaskCount }}</div>
            </div>
          </div>

          <div class="feedback">
            <h3>💡 改进建议</h3>
            <ul>
              <li v-for="(tip, index) in improvementTips" :key="index">{{ tip }}</li>
            </ul>
          </div>

          <div class="action-buttons">
            <el-button type="primary" size="large" @click="restartGame">再玩一次</el-button>
            <el-button size="large" @click="goBack">返回游戏中心</el-button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import {
  ArrowLeft, Clock, CaretRight, CircleCheck, Lightning, Star, Trophy, Coffee, Orange
} from '@element-plus/icons-vue'

const router = useRouter()

const gameStatus = ref('ready')
const currentTime = ref('08:00')
const currentHour = ref(8)
const currentMinute = ref(0)
const energy = ref(100)
const score = ref(0)
const selectedTask = ref(null)
const showMatrix = ref(true)
const currentEvent = ref(null)

const tasks = ref([
  // 重要且紧急
  { id: 1, name: '处理客户投诉', description: '重要客户对产品质量提出严重投诉', urgent: true, important: true, duration: 1.5, energyCost: 30, value: 150, completed: false },
  { id: 2, name: '修复系统BUG', description: '生产环境出现严重BUG，影响业务', urgent: true, important: true, duration: 2, energyCost: 40, value: 200, completed: false },
  
  // 重要不紧急
  { id: 3, name: '季度规划会议', description: '制定下季度的工作计划和目标', urgent: false, important: true, duration: 2, energyCost: 25, value: 180, completed: false },
  { id: 4, name: '团队培训', description: '组织团队学习新技术和方法', urgent: false, important: true, duration: 2.5, energyCost: 30, value: 160, completed: false },
  { id: 5, name: '系统优化方案', description: '设计系统性能优化方案', urgent: false, important: true, duration: 3, energyCost: 35, value: 170, completed: false },
  
  // 紧急不重要
  { id: 6, name: '接待来访客人', description: '接待公司参观人员', urgent: true, important: false, duration: 1, energyCost: 15, value: 50, completed: false },
  { id: 7, name: '参加临时会议', description: '被拉去参加一个非必要会议', urgent: true, important: false, duration: 1.5, energyCost: 20, value: 40, completed: false },
  
  // 不重要不紧急
  { id: 8, name: '整理办公桌', description: '清理桌面，整理文件', urgent: false, important: false, duration: 0.5, energyCost: 10, value: 20, completed: false },
  { id: 9, name: '浏览行业资讯', description: '阅读行业新闻和技术博客', urgent: false, important: false, duration: 1, energyCost: 10, value: 30, completed: false },
  { id: 10, name: '更新工作日志', description: '记录本周工作内容', urgent: false, important: false, duration: 0.5, energyCost: 5, value: 15, completed: false }
])

const randomEvents = [
  {
    id: 1,
    icon: '📞',
    title: '紧急电话',
    description: '老板打来电话要求立即汇报项目进度',
    options: [
      { text: '立即汇报（30分钟）', type: 'primary', effect: { time: 30, energy: -15, score: 20 } },
      { text: '稍后回复（可能有影响）', type: 'default', effect: { score: -10 } }
    ]
  },
  {
    id: 2,
    icon: '👥',
    title: '同事求助',
    description: '同事遇到技术问题请你帮忙',
    options: [
      { text: '帮助解决（45分钟）', type: 'success', effect: { time: 45, energy: -20, score: 30 } },
      { text: '委婉拒绝', type: 'default', effect: { score: -5 } }
    ]
  },
  {
    id: 3,
    icon: '📧',
    title: '邮件轰炸',
    description: '收到大量非紧急邮件',
    options: [
      { text: '集中处理（1小时）', type: 'warning', effect: { time: 60, energy: -15, score: 10 } },
      { text: '标记稍后处理', type: 'primary', effect: {} }
    ]
  }
]

const usedHours = computed(() => {
  return Math.round((currentHour.value - 8 + currentMinute.value / 60) * 10) / 10
})

const timeProgress = computed(() => {
  return ((currentHour.value - 8) * 60 + currentMinute.value) / 600 * 100
})

const energyColor = computed(() => {
  if (energy.value > 70) return '#67c23a'
  if (energy.value > 30) return '#e6a23c'
  return '#f56c6c'
})

const completedTaskCount = computed(() => {
  return tasks.value.filter(t => t.completed).length
})

const highValueTaskCount = computed(() => {
  return tasks.value.filter(t => t.completed && t.value >= 150).length
})

const timeUtilization = computed(() => {
  return Math.round((usedHours.value / 10) * 100)
})

const efficiencyRating = computed(() => {
  if (score.value >= 800) return 5
  if (score.value >= 600) return 4
  if (score.value >= 400) return 3
  if (score.value >= 200) return 2
  return 1
})

const finalGrade = computed(() => {
  if (score.value >= 800 && completedTaskCount.value >= 8) return 'S'
  if (score.value >= 600 && completedTaskCount.value >= 6) return 'A'
  if (score.value >= 400 && completedTaskCount.value >= 5) return 'B'
  if (score.value >= 200) return 'C'
  return 'D'
})

const gradeText = computed(() => {
  const texts = {
    S: '卓越！你完美地掌握了时间管理的精髓！',
    A: '优秀！你很好地平衡了各项任务的优先级！',
    B: '良好！你的时间管理能力还不错，继续加油！',
    C: '及格！还需要学习如何更好地管理时间。',
    D: '需要改进！建议学习时间管理的基本原则。'
  }
  return texts[finalGrade.value]
})

const improvementTips = computed(() => {
  const tips = []
  const urgentImportantDone = tasks.value.filter(t => t.urgent && t.important && t.completed).length
  const notUrgentImportantDone = tasks.value.filter(t => !t.urgent && t.important && t.completed).length
  
  if (urgentImportantDone < 2) {
    tips.push('优先处理重要且紧急的任务，这些直接影响工作结果')
  }
  if (notUrgentImportantDone < 2) {
    tips.push('多花时间在重要不紧急的任务上，这些决定长期发展')
  }
  if (energy.value < 20) {
    tips.push('注意能量管理，适时休息能提高整体效率')
  }
  if (completedTaskCount.value < 5) {
    tips.push('提高任务完成数量，合理分配时间')
  }
  if (tips.length === 0) {
    tips.push('继续保持，你的时间管理做得很好！')
  }
  return tips
})

const getTasksByQuadrant = (quadrant) => {
  const mapping = {
    'urgent-important': { urgent: true, important: true },
    'not-urgent-important': { urgent: false, important: true },
    'urgent-not-important': { urgent: true, important: false },
    'not-urgent-not-important': { urgent: false, important: false }
  }
  const criteria = mapping[quadrant]
  return tasks.value.filter(t => t.urgent === criteria.urgent && t.important === criteria.important)
}

const selectTask = (task) => {
  if (!task.completed) {
    selectedTask.value = task
  }
}

const doTask = () => {
  if (!selectedTask.value || selectedTask.value.completed) return
  
  if (energy.value < selectedTask.value.energyCost) {
    ElMessage.warning('能量不足，请先休息')
    return
  }

  // 执行任务
  selectedTask.value.completed = true
  score.value += selectedTask.value.value
  energy.value -= selectedTask.value.energyCost
  
  // 推进时间
  addTime(selectedTask.value.duration * 60)
  
  ElMessage.success(`完成任务《${selectedTask.value.name}》+${selectedTask.value.value}分`)
  selectedTask.value = null
  
  // 随机触发事件
  if (Math.random() < 0.3 && !currentEvent.value) {
    triggerRandomEvent()
  }
  
  // 检查是否结束
  checkEndGame()
}

const takeBreak = (minutes) => {
  const energyGain = minutes === 30 ? 30 : 20
  energy.value = Math.min(100, energy.value + energyGain)
  addTime(minutes)
  ElMessage.success(`休息${minutes}分钟，恢复${energyGain}点能量`)
  checkEndGame()
}

const addTime = (minutes) => {
  currentMinute.value += minutes
  while (currentMinute.value >= 60) {
    currentMinute.value -= 60
    currentHour.value += 1
  }
  updateTimeDisplay()
}

const updateTimeDisplay = () => {
  const hour = String(currentHour.value).padStart(2, '0')
  const minute = String(currentMinute.value).padStart(2, '0')
  currentTime.value = `${hour}:${minute}`
}

const triggerRandomEvent = () => {
  const event = randomEvents[Math.floor(Math.random() * randomEvents.length)]
  currentEvent.value = event
}

const handleEventOption = (option) => {
  if (option.effect.time) addTime(option.effect.time)
  if (option.effect.energy) energy.value += option.effect.energy
  if (option.effect.score) score.value += option.effect.score
  
  ElMessage.info('处理完毕')
  currentEvent.value = null
  checkEndGame()
}

const checkEndGame = () => {
  if (currentHour.value >= 18) {
    endDay()
  }
}

const endDay = () => {
  gameStatus.value = 'finished'
  ElMessage.success('今天的工作结束了！')
}

const startGame = () => {
  gameStatus.value = 'playing'
  ElMessage.success('新的一天开始了！加油💪')
}

const restartGame = () => {
  gameStatus.value = 'ready'
  currentHour.value = 8
  currentMinute.value = 0
  currentTime.value = '08:00'
  energy.value = 100
  score.value = 0
  selectedTask.value = null
  currentEvent.value = null
  tasks.value.forEach(t => t.completed = false)
}

const goBack = () => {
  router.push('/learning/games')
}
</script>

<style scoped>
.time-management-game {
  min-height: 100vh;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.game-header {
  background: white;
  padding: 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.header-content {
  max-width: 1400px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.game-title {
  flex: 1;
  text-align: center;
}

.game-title h1 {
  margin: 0 0 5px 0;
  font-size: 24px;
}

.game-title p {
  margin: 0;
  color: #909399;
  font-size: 14px;
}

.game-stats {
  display: flex;
  gap: 10px;
}

.game-container {
  max-width: 1400px;
  margin: 0 auto;
  padding: 20px;
}

/* 开始界面 */
.game-start {
  display: flex;
  justify-content: center;
  padding: 40px 0;
}

.start-card {
  background: white;
  border-radius: 16px;
  padding: 40px;
  max-width: 700px;
  text-align: center;
}

.start-icon {
  font-size: 80px;
  color: #409eff;
  margin-bottom: 20px;
}

.start-card h2 {
  margin: 0 0 15px 0;
  font-size: 32px;
}

.game-rules {
  text-align: left;
  background: #f5f7fa;
  padding: 20px;
  border-radius: 8px;
  margin: 20px 0 30px;
}

.game-rules h3 {
  margin: 0 0 15px 0;
  font-size: 18px;
}

.game-rules ul {
  margin: 0 0 20px 0;
  padding-left: 20px;
}

.game-rules li {
  margin-bottom: 8px;
  line-height: 1.6;
}

.time-matrix h4 {
  margin: 20px 0 15px 0;
  font-size: 16px;
  color: #303133;
}

.matrix-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

.matrix-cell {
  padding: 15px;
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
}

.matrix-cell strong {
  font-size: 14px;
}

.matrix-cell span {
  font-size: 12px;
  opacity: 0.9;
}

.urgent-important {
  background: linear-gradient(135deg, #f56c6c 0%, #ef5350 100%);
  color: white;
}

.not-urgent-important {
  background: linear-gradient(135deg, #e6a23c 0%, #ffa726 100%);
  color: white;
}

.urgent-not-important {
  background: linear-gradient(135deg, #409eff 0%, #42a5f5 100%);
  color: white;
}

.not-urgent-not-important {
  background: linear-gradient(135deg, #909399 0%, #bdbdbd 100%);
  color: white;
}

/* 游戏进行中 */
.board-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.board-header h3 {
  margin: 0;
  font-size: 16px;
}

.task-matrix {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 15px;
}

.matrix-quadrant {
  background: #f5f7fa;
  border-radius: 8px;
  padding: 15px;
  min-height: 300px;
}

.matrix-quadrant h4 {
  margin: 0 0 15px 0;
  font-size: 14px;
  font-weight: 600;
}

.task-item {
  background: white;
  border-radius: 6px;
  padding: 12px;
  margin-bottom: 10px;
  cursor: pointer;
  transition: all 0.3s;
  border: 2px solid transparent;
}

.task-item:hover {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.task-item.selected {
  border-color: #409eff;
}

.task-item.completed {
  opacity: 0.5;
  cursor: not-allowed;
}

.task-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.task-name {
  font-size: 14px;
  font-weight: 500;
}

.task-meta {
  display: flex;
  gap: 10px;
  font-size: 12px;
  color: #606266;
}

.task-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.task-card {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 15px;
  background: #f5f7fa;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s;
  border: 2px solid transparent;
  position: relative;
}

.task-card:hover {
  background: #ecf5ff;
}

.task-card.selected {
  border-color: #409eff;
  background: #ecf5ff;
}

.task-card.completed {
  opacity: 0.5;
}

.task-info {
  flex: 1;
}

.task-info h4 {
  margin: 0 0 5px 0;
  font-size: 16px;
}

.task-info p {
  margin: 0 0 10px 0;
  color: #606266;
  font-size: 14px;
}

.task-tags {
  display: flex;
  gap: 5px;
}

.task-stats {
  display: flex;
  flex-direction: column;
  gap: 5px;
  text-align: right;
}

.task-stats .stat {
  font-size: 13px;
  color: #606266;
}

.check-icon {
  position: absolute;
  top: 15px;
  right: 15px;
  font-size: 24px;
  color: #67c23a;
}

.event-card {
  margin-top: 20px;
}

.event-card h3 {
  margin: 0;
  font-size: 16px;
}

.event-card p {
  margin: 15px 0;
  line-height: 1.6;
}

.event-options {
  display: flex;
  gap: 10px;
}

.action-panel h3,
.statistics-panel h3 {
  margin: 0;
  font-size: 16px;
}

.time-display,
.energy-display {
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 15px;
  background: #f5f7fa;
  border-radius: 8px;
  margin-bottom: 15px;
}

.time-icon,
.energy-icon {
  font-size: 32px;
  color: #409eff;
}

.time-info,
.energy-info {
  flex: 1;
}

.current-time,
.energy-text {
  font-size: 20px;
  font-weight: bold;
  margin-bottom: 8px;
}

.selected-task h4 {
  margin: 0 0 15px 0;
  font-size: 15px;
}

.task-detail h3 {
  margin: 0 0 10px 0;
  font-size: 18px;
}

.task-detail p {
  margin: 0 0 15px 0;
  color: #606266;
  line-height: 1.6;
}

.task-requirements {
  background: #f5f7fa;
  border-radius: 8px;
  padding: 15px;
  margin-bottom: 15px;
}

.requirement {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
  font-size: 14px;
}

.requirement:last-child {
  margin-bottom: 0;
}

.no-selection {
  padding: 40px 0;
}

.quick-actions h4 {
  margin: 0 0 15px 0;
  font-size: 15px;
}

.quick-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.statistics-panel {
  margin-top: 20px;
}

.stat-item {
  display: flex;
  justify-content: space-between;
  padding: 12px 0;
  border-bottom: 1px solid #ebeef5;
}

.stat-item:last-child {
  border-bottom: none;
}

/* 游戏结束 */
.game-finish {
  display: flex;
  justify-content: center;
  padding: 40px 0;
}

.finish-card {
  background: white;
  border-radius: 16px;
  padding: 50px;
  max-width: 800px;
  text-align: center;
}

.finish-icon {
  font-size: 80px;
  margin-bottom: 20px;
}

.finish-icon.S, .finish-icon.A {
  color: #f59e0b;
}

.finish-card h2 {
  margin: 0 0 20px 0;
  font-size: 32px;
}

.final-grade {
  display: inline-block;
  padding: 10px 30px;
  border-radius: 50px;
  font-size: 48px;
  font-weight: bold;
  margin-bottom: 15px;
}

.final-grade.S {
  background: linear-gradient(135deg, #ffd700 0%, #ffed4e 100%);
  color: #8b4513;
}

.final-grade.A {
  background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
  color: white;
}

.grade-text {
  margin: 0 0 30px 0;
  font-size: 16px;
  color: #606266;
}

.final-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-bottom: 30px;
}

.stat-block {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 12px;
  padding: 20px;
  color: white;
}

.stat-label {
  font-size: 14px;
  margin-bottom: 10px;
  opacity: 0.9;
}

.stat-value {
  font-size: 28px;
  font-weight: bold;
}

.feedback {
  text-align: left;
  background: #f5f7fa;
  padding: 20px;
  border-radius: 8px;
  margin-bottom: 30px;
}

.feedback h3 {
  margin: 0 0 15px 0;
  font-size: 18px;
}

.feedback ul {
  margin: 0;
  padding-left: 20px;
}

.feedback li {
  margin-bottom: 8px;
  line-height: 1.6;
}

.action-buttons {
  display: flex;
  justify-content: center;
  gap: 15px;
}

@media (max-width: 1200px) {
  .game-playing {
    display: block;
  }
  
  .final-stats {
    grid-template-columns: repeat(2, 1fr);
  }
}
</style>

